<template>
	<div class="store-register">
		<el-row class="store-register-container">
			<el-col :span="6" style="height: 100%">
				<el-image style="width: 100%; height: 100%" :src="require('../assets/register-bg.jpg')"></el-image>
			</el-col>
			<el-col :span="18">
				<el-row style="margin: 80px 200px 0; text-align: right; font-size: 18px">
					<span style="color: #999">已有账号? </span>
					<router-link to="login" style="text-decoration: none"><span style="color: #409eff">请登录</span>
					</router-link>
				</el-row>
				<el-row style="margin: 120px 0 0 0">
					<p style="font-size: 44px"><strong>欢迎注册！</strong>(๑•̀ㅂ•́)و✧</p>
					<p style="margin: 0 0 44px 0"></p>
				</el-row>
				<el-row style="width: 400px; margin: auto">
					<el-form :model="registerForm" :rules="rules" status-icon ref="form">
						<el-form-item prop="nickname" label="昵称">
							<el-input v-model="registerForm.nickname" prefix-icon="el-icon-user" type="text" maxlength="8" show-word-limit></el-input>
						</el-form-item>
						<el-form-item prop="password" label="密码">
							<el-input v-model="registerForm.password" type="password" prefix-icon="el-icon-key"></el-input>
						</el-form-item>
						<el-form-item prop="username" label="手机号">
							<el-input v-model="registerForm.username" maxlength="11" show-word-limit>
								<template slot="prepend">+86</template>
							</el-input>
						</el-form-item>
						<el-form-item style="margin: 36px 0 0 0">
							<el-button type="primary" @click="register" style="width: 100%">注册</el-button>
						</el-form-item>
					</el-form>
				</el-row>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			const isNotNull = (rule, value, callback) => {
				if (value) {
					callback()
				} else {
					callback(new Error("不能为空"))
				}
			}
			const isTel = (rule, value, callback) => {
				if (/^[1][3,4,5,7,8,9][0-9]{9}$/.test(value)) {
					callback()
				} else {
					callback(new Error("电话格式不正确"))
				}
			}
			return {
				registerForm: {
					nickname: null,
					password: null,
					username: null
				},
				rules: {
					nickname: [{
						validator: isNotNull,
						trigger: 'blur'
					}],
					password: [{
							max: 16,
							trigger: 'blur',
							message: '密码长度最多16位'
						},
						{
							min: 6,
							trigger: 'blur',
							message: '密码长度不能低于6位'
						}
					],
					username: [{
						validator: isTel,
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			register() {
				let form = this.$refs['form']
				form.validate((check) => {
					if (check) {
						this.postRegisterRequest(form)
					}
				})
			},
			async postRegisterRequest(form) {
				let formData = form.model;
				let pwd = this.$sha256(formData.password)
				const req = {
					nickname: formData.nickname,
					password: pwd,
					username: formData.username
				}
				const {
					data: resp
				} = await this.$http.post('/api/user/put', JSON.stringify(req))
				this.$message.success(resp.message)
				if (resp.code === 1010) {
					this.$router.push("/login")
				}
				form.resetFields()
			}
		}
	}
</script>

<style>
	.store-register,
	.store-register-container {
		height: 100%;
		width: 100%;
	}
</style>
